<!--
 * @title: 组件demo
 * @author: andy.ten@tom.com & xukaixing@hotmail.com
 * @Date: 2022-04-06 14:58:25
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2022-05-11 11:16:22
 * @version: 1.0.4
 * @copyright: copyright (c) 2022 andyten
 *  node: you can not copy and/or use and/or modify this program free,
 *  please reserve the segment above.Please mail me if you have any question.
-->
<template>
  <div>
    <ht-tabs :tab-position="tabPosition">
      <ht-tab-pane label="查询">
        <div>
          <!-- 查询条件表单 -->
          <ht-form ref="userSearchFm" ref-form="userSearchFm" divider="检索分栏" :form-list="userSearchList">
            <ht-search-bar>
              <ht-button @click="handleSearch()">检索</ht-button>
              <ht-button>重置</ht-button>
            </ht-search-bar>
          </ht-form>
          <!-- @rowDblclick="handleRowDblClick" -->
          <ht-table ref="userTableList" ref-table="userTableList" :table-head="tableHeadList" :table-data="searchUserData" :page-size="10" :table-export="true">
            <ht-button @click="handleSave">新增</ht-button>
            <ht-button>导入模版下载</ht-button>
            <ht-button>导入表格</ht-button>
            <template slot="export">
              <ht-export-dialog :export="exportUser" />
            </template>
          </ht-table>
        </div>
      </ht-tab-pane>
      <ht-tab-pane label="表单" :style="{height:'300px'}">
        <!-- 查询条件表单 -->
        <ht-form ref-form="formList" divider="检索分栏" :form-list="formList" />
      </ht-tab-pane>
      <ht-tab-pane label="日期" :style="{height:'400px'}">
        <ht-row>
          <ht-col :span="12">
            <ht-form ref-form="dateForm" :form-list="dateFormList" divider="日期组件" :style="{width:'400px'}" />
          </ht-col>
          <ht-col :span="12">
            <ht-form ref-form="dateTimeForm" :form-list="dateTimeFormList" divider="时间组件" :form-style="{width:'400px'}" />
          </ht-col>
        </ht-row>
      </ht-tab-pane>
      <ht-tab-pane label="字典">
        <ht-row>
          <ht-col>
            <ht-form ref-form="dictForm" :form-list="dictFormList" divider="字典组件" :form-style="{width:'800px'}" />
          </ht-col>
        </ht-row>
      </ht-tab-pane>
      <ht-tab-pane label="校验">
        <ht-row>
          <ht-col>
            <ht-form ref-form="validateForm" :form-list="validateFormList" divider="校验组件" :form-style="{width:'800px'}" />
          </ht-col>
        </ht-row>
      </ht-tab-pane>
      <ht-tab-pane label="弹窗">
        <ht-divider label="窗口管理" />
        <div style="margin:20px">
          <ht-button icon="ht-icon-chuangkou01" @click="dialogVisible=!dialogVisible">普通弹出</ht-button>
          <ht-button icon="ht-icon-chuangkou01" @click="drawerVisible=!drawerVisible">抽屉浮动</ht-button>
        </div>
      </ht-tab-pane>
    </ht-tabs>
    <!--  注意dialog位置必须放置在根目录下  -->
    <demo-edit v-if="editVisible" :visible.sync="editVisible" :row-data="rowData" />
    <demo-dialog v-if="dialogVisible" ref="dialogDemo" :visible.sync="dialogVisible" />
    <demo-drawer v-if="drawerVisible" ref="drawerDemo" :visible.sync="drawerVisible" />
  </div>
</template>
<script>
import DemoEdit from './module/demoEdit.vue';
import DemoDialog from './module/demoDialog';
import DemoDrawer from './module/demoDrawer';
import { findUsers, findUserLoginInfo, exportUser, findDictFromTable } from '@/api/ht.admin';
export default {
  name: 'DemoForm',
  components: {
    DemoEdit,
    DemoDialog,
    DemoDrawer
  },

  data() {
    return {
      editVisible: false,
      dialogVisible: false,
      drawerVisible: false,
      tabPosition: 'left',
      rowData: {},
      exportUser: exportUser,
      userSearchList: [
        {
          type: 'text',
          format: [0, 'is_any', 3],
          label: '用户账号',
          field: 'account',
          upper: true
        },
        {
          type: 'text',
          format: [0, 'is_any', 30],
          label: '用户姓名',
          field: 'userName'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 30],
          dicType: 'yxzt',
          label: '状态',
          field: 'status'
        },
        {
          type: 'text',
          format: [0, 'isAny', 30],
          label: '岗位',
          field: 'postStation'
        }

      ],
      tableHeadList: [
        {
          type: 'action',
          label: '操作',
          content: ['编辑', '停用', '用户登录明细', '订单详细信息'],
          action: [
            (row, index) => this.handleEdit(row, index),
            (row, index) => this.handleDel(row, index),
            (row, index) => this.handleDetail(row, index),
            (row, index) => this.handleInfo(row, index)
          ]
        },
        {
          label: '用户账号',
          prop: 'account',
          fixed: 'left',
          align: 'right',
          query: true
        },
        {
          label: '用户姓名',
          prop: 'userName',
          fixed: 'left',
          query: true
        },
        {
          label: '工号',
          prop: 'userSn'
        },
        {
          label: '岗位',
          prop: 'postStation'
        },
        {
          label: '出生日期',
          prop: 'birthDate'
        },
        {
          label: '性别',
          prop: 'sex',
          type: 'dic',
          dicType: 'xb'
        },
        {
          label: '手机号码',
          prop: 'mobile',
          align: 'right'
        },
        {
          label: '邮箱地址',
          prop: 'email'
        },
        {
          label: '用户类型',
          prop: 'userType'
        },
        {
          label: '用户级别',
          prop: 'userLevel'
        },
        {
          label: '状态',
          prop: 'status',
          render: (scope) => {
            return (
              <ht-switch
                value={scope.row.status.c}
                key={scope.column.columnKey}
                // disabled='true'
                onChange={(newValue) => this.testRefer(newValue, scope)}
              >
              </ht-switch>
            );
          }
        }
      ],
      searchUserData: {},
      roleHeadList: [
        {
          label: '用户账号',
          prop: 'userAccount'
        },
        {
          label: '用户名称',
          prop: 'userName'
        },
        {
          label: '登录时间',
          prop: 'loginTime'
        }
      ],
      formList: [
        {
          type: 'text', // text、checkbox、radio、dic、textarea、date、datetime、number
          format: [1, 'is_any', 5],
          label: '用户名称',
          hidden: false,
          field: 'demoUserName',
          placeholder: 'hello',
          value: 'admin',
          colspan: 3 // 占用输入域个数,最大不能超过4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '标准日期',
          hidden: false,
          field: 'createDate'
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '标准日期',
          hidden: false,
          field: 'createDate'
        },
        {
          type: 'blank'
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '标准日期',
          hidden: false,
          field: 'createDate'
        }
      ],
      // date tab
      dateFormList: [
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '标准日期',
          hidden: false,
          field: 'dateCreateDate',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '周期日期',
          dateType: 'daterange',
          hidden: false,
          field: 'dateRangeDate',
          value: '',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '禁用日期',
          dateType: 'date',
          hidden: false,
          // disabledDateFunc: ['beforeToday'], // 预设禁用日期函数['beforeToday','afterToday']
          disabledDate: (date) => { // 自定义禁用日期函数
            // console.log(this.formList[0].value); // 可以支持按照指定日期禁用
            return date.getTime() < Date.now() - 8.64e7;
          },
          field: 'dateDisabledDate1',
          value: '',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 4],
          dateType: 'year',
          label: '选择年份',
          hidden: false,
          field: 'dateSelectYear',
          value: '',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'month',
          label: '选择月份',
          hidden: false,
          field: 'dateSelectMonth',
          value: '',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'week',
          label: '选择周度',
          hidden: false,
          field: 'dateSelectWeek',
          value: '',
          colspan: 4
        }
      ],
      // datetime tab
      dateTimeFormList: [
        {
          type: 'datetime',
          format: [0, 'isDateTime', 10],
          label: '日期时间',
          dateType: 'datetime',
          hidden: false,
          field: 'dateTimeCreateDate'
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'date',
          label: '固定时间',
          hidden: false,
          field: 'timeFixTime'
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '任意时间',
          dateType: 'daterange',
          hidden: false,
          field: 'timeAny',
          value: ''
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '禁用时间',
          dateType: 'date',
          hidden: false,
          disabled: true,
          field: 'timeDisabled',
          value: ''
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'week',
          label: '时间范围',
          hidden: false,
          field: 'timeRange',
          value: ''
        }
      ],
      dictFormList: [
        {
          type: 'dic',
          format: [0, 'isDic', 10],
          dicType: 'zzjb',
          label: '标准字典',
          field: 'dict01'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 100],
          dicType: 'zzjb',
          label: '多选字典',
          field: 'dictMultiple',
          multiple: true
        },
        {
          type: 'dic',
          format: [0, 'isDic', 10],
          dicType: 'zzjb',
          label: '字典框禁用',
          field: 'dictDisabled',
          disabled: true
        },
        {
          type: 'dic',
          format: [0, 'isDic', 10],
          dicType: 'E#100601=集团:10602=分公司',
          label: '枚举字典',
          field: 'dictEnums'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 10],
          dicType: 'zzjb',
          label: '过滤字典',
          field: 'dictFilter',
          filtercode: '100601|100605' // 正则表达式方式
        },
        {
          type: 'dic',
          format: [0, 'isDic', 10],
          dicType: 'zzjb',
          label: '带默认值',
          field: 'dictDefaultVal',
          value: '100601',
          showLabel: '集团公司'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 30],
          label: '表选字典',
          field: 'dictTable',
          dicType: 't#FUNC-USER-USERID',
          dicRemote: (dicType, query) => findDictFromTable(dicType, query),
          cb: (row) => this.handleDicCallBack(row)
        }
      ],
      validateFormList: [
        {
          type: 'text',
          format: [0, 'isAny', 10],
          label: '无校验',
          field: 'validate00'
        },
        {
          type: 'text',
          format: [0, 'isUrl', 30],
          label: 'url',
          field: 'validate02'
        },
        {
          type: 'text',
          format: [0, 'isName', 30],
          label: '名称/姓名',
          field: 'validate01'
        },
        {
          type: 'text',
          format: [0, 'isEmail', 30],
          label: 'email',
          field: 'validate04'
        },
        {
          type: 'text',
          format: [0, 'isPhone', 11],
          label: '手机',
          field: 'validate05'
        },
        {
          type: 'text',
          format: [0, 'isPhoneTel', 30],
          label: '手机或固话',
          field: 'validate06'
        },
        {
          type: 'text',
          format: [0, 'isIp', 30],
          label: 'IP地址',
          field: 'validate07'
        },
        {
          type: 'text',
          format: [0, 'isIdcard', 18],
          label: '身份证号',
          field: 'validate08'
        },
        {
          type: 'text',
          format: [0, 'isMoney', 10],
          label: '金额/价格',
          field: 'validate09'
        },
        {
          type: 'text',
          format: [0, 'isBigMoney', 10],
          label: '千位符金额',
          field: 'validate10'
        },
        {
          type: 'text',
          format: [0, 'isNumber', 10],
          label: '数字',
          field: 'validate11'
        },
        {
          type: 'text',
          format: [0, 'isNumber0', 10],
          label: '数字非0头',
          field: 'validate11-1'
        },
        {
          type: 'text',
          format: [0, 'isLetter', 30],
          label: '字母',
          field: 'validate03'
        },
        {
          type: 'text',
          format: [0, 'isNumberLetter', 10],
          label: '数字和字母',
          field: 'validate12'
        },
        {
          type: 'text',
          format: [0, 'isDouble', 10],
          label: '浮点数',
          field: 'validate13'
        },
        {
          type: 'text',
          format: [0, 'isCarno', 10],
          label: '车牌号',
          field: 'validate14'
        },
        {
          type: 'text',
          format: [0, 'isVin', 17],
          label: '底盘号',
          field: 'validate15'
        }
      ]
    };
  },
  computed: {
  },
  methods: {
    handleSave() {
      this.editVisible = true;
      this.rowData = {};
    },
    handleEdit(row, index) {
      this.editVisible = true;
      this.rowData = row;
    },
    handleDel(row, index) {
      alert(index);
      console.log(row);
    },
    async handleDetail(row, index) {
      const detailData = await this.$crud.fetchTable(findUserLoginInfo, { userId: row.id });
      return (
        <ht-table ref={`userRoleList-${index}`} ref-table={`userRoleList-${index}`} table-head={this.roleHeadList} table-data={detailData} table-type='detail' table-fetch={findUserLoginInfo} />
      );
    },
    handleInfo(row, index) {
      this.editVisible = true;
      this.rowData = row;
    },
    testRefer(newValue, scope) {
      if (newValue === true)
        scope.row.status.c = '100201';
      else
        scope.row.status.c = '100202';

      this.$notify.confirm('是否更改状态?').then(() => {
        alert(scope.row.userName);
      }).catch(() => {
        if (newValue === true)
          scope.row.status.c = '100202';
        else
          scope.row.status.c = '100201';
      });
    },
    async handleSearch(event) {
      try {
        // 拼接查询条件
        this.searchUserData = await this.$crud.search(this.$refs['userSearchFm'], this.$refs['userTableList'], findUsers);
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    },
    /**
     * @todo: 行双击事件
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-04-27 13:56:56
     * @param {*} row
     * @param {*} column
     * @param {*} event
     */
    handleRowDblClick(row, column, event) {
      alert('dblclick');
      console.log(row);
    }
  }
};
</script>
